<!--公共头部-->
{template 'aitimt/common/header'}
	<style>
		.mui-input-row{overflow: unset;}
		.mui-search input[type=search] {background-color: #EFEFEF;width: 80%;border-radius: 3.125rem;border: 1px #eee solid;height: 35px;}
		.top-slider{z-index: 15;margin-top:15% ;overflow: unset;}
		.top-slider .mui-slider-group .mui-slider-item img{width: 100%;}
		.mui-indicator .mui-active{background-color:#000000;}
		.mui-search .mui-placeholder{color: #595757;line-height: 2.5rem;font-size: 0.9375rem;width: 45%;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;border-bottom: 0;}
		.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
		.mui-table-view .mui-media-object{max-width: 40%;}
		.mui-input-row .mui-btn{background-color: #a4a4a4;float: none;border-radius: 13px;color: #fff;padding: 0;height: 35px;}
		.mui-slider{background-color: #efefef;margin-bottom: 20%;}
		.mui-slider-indicator.mui-segmented-control .mui-control-item {border-bottom: 1px solid rgba(0,0,0,0.05);line-height: 30px;padding: 1px;color: #585858;}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: 0}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{content: '';position: absolute;bottom: 0;height: 3px;width: 30%;display: -webkit-box;margin-left: 10%;background-color: #E94709;}
		.mui-table-view-cell:after{height: 0;}
		.mui-ios .mui-table-view-cell img{max-width: 100%;width: 100%;}
		.mui-card{margin: 0;box-shadow:none;}
		.mui-table-view{background-color: #efefef;}
		.mui-input-row .mui-input-clear~.mui-icon-clear{display: none;}
		.mui-scroll{position: unset;}
		.selectList{width: 60%;}
		.selectList p{font-size: 11px;border-bottom: 1px solid #EEEEEE;z-index: 10}
		.wonder-search{display: none}
		.mui-input-row.mui-search.mui-active::before{display: none}
		.mui-search.mui-active input[type=search] {font-size: 12px;}
	</style>
	<!-- 公共头部start -->
	<header class="mui-bar mui-bar-nav">
		<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
		<a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
		<!--公共菜单start -->
		{template 'aitimt/common/menu'}
		<!-- 公共菜单end-->
	</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">按赛事查询</a>
					<a class="mui-control-item" href="#item2mobile">按证件查询</a>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
							<div class="mui-scroll">

								<div class="mui-input-row mui-search" style="margin-left: 5%;margin-top: 5%;">
									<input type="search" placeholder="搜索赛事名称" list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this, 'cityList')" >
									<button type="button" class="mui-btn" style="width: 15%;" onclick="search(id,'btn')">查询</button>
									<div class="picture_click dropDowns" style=""></div>
									<div id="cityList" class="selectList"></div>
								</div>
								<div class="mui-card">
									<ul class="mui-table-view mui-table-view-chevron" id="result1">
										{loop $activityList $key $activity}
										{if !empty($activity)}
										<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right">{$key}赛事成绩</a>
											<ul class="mui-table-view mui-table-view-chevron">
												{loop $activity $item}
												<li class="mui-table-view-cell"><a class="mui-navigate-right" href="{php echo app_url('home/index/gradesearch').'&raceid='.$item['raceid'].'&url='.$item['url']}">{$item['name']}</a>
												</li>
												{/loop}
											</ul>
										</li>
										{/if}
										{/loop}
									</ul>
								</div>
							</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
							<div class="mui-scroll">
								<div class="mui-input-row mui-search" style="margin-left: 5%;margin-top: 5%;">
										<input type="search" class="mui-input-clear" id="search2" placeholder="请输入证件号">
										<button type="button" class="mui-btn" style="width: 15%;" onclick="submit('search2')">查询</button>
								</div>
								<div class="mui-card">
									<ul class="mui-table-view mui-table-view-chevron" id="result2">
										{loop $activityList $key $activity}
										{if !empty($activity)}
										<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right">{$key}赛事成绩</a>
											<ul class="mui-table-view mui-table-view-chevron">
												{loop $activity $item}
												<li class="mui-table-view-cell"><a class="mui-navigate-right" href="{php echo app_url('home/index/gradesearch').'&raceid='.$item['raceid'].'&url='.$item['url']}">{$item['name']}</a>
												</li>
												{/loop}
											</ul>
										</li>
										{/if}
										{/loop}
									</ul>
								</div>
							</div>

					</div>

				</div>
			</div>

		</div>
		<!-- 公共底部start -->
		{template 'aitimt/common/nav'}
		<!-- 公共底部end -->
		<script type="text/javascript">
		mui.init({
			swipeBack:false //启用右滑关闭功能
		});
        mui('.mui-scroll').scroll({ deceleration: 0.0005 });
        mui('.mui-slider').slider().stopped = true;

        mui('.mui-slider-indicator').on("tap",'a',function(){
            mui(".mui-table-view .mui-collapse").each(function () {
                $(this).removeClass('mui-active');
            });
        });

        $("input").focus(function(){
            $('#bar').css('display','none');
            $('.mui-card').css('display','none');
            $('.selectList').css('display','none');
            $('.selectList').css('opacity','1');
        });

        $("input").blur(function(){
            $('#bar').css('display','table');
            $('.mui-card').css('display','block');
            $('.selectList').css('opacity','0');
        });
        function search(id,type) {
            $('.mui-placeholder').css('display','none');
            $(' input[type=search]').css('font-size','12px');
            $(' input[type=search]').css('text-align','unset');

            var listArr=eval('{php echo json_encode($templist);}');
            var result='';
            var text=$('#cityName').val();
            $.each(listArr, function(index, item){
                if(type=='btn'){
                    if (item.name==text) {
                        var detail="{php echo app_url('home/index/gradesearch')}"+'&raceid='+item.raceid+'&url='+item.url;
                        result+='<li class="mui-table-view-cell">' +
                            '<a class="mui-navigate-right" href='+detail+'>'+item.name+'</a> </li>'
                    }
                }else {
                    if(item.raceid==id){
                        var detail="{php echo app_url('home/index/gradesearch')}"+'&raceid='+item.raceid+'&url='+item.url;
                        result+='<li class="mui-table-view-cell">' +
                            '<a class="mui-navigate-right" href='+detail+'>'+item.name+'</a> </li>'
                    }
                }
            })

            document.getElementById('result1').innerHTML=result;
            document.getElementById('result2').innerHTML=result;
        }
        function fuzzySearch(listId) {
            var that = this;
            //初始化下拉框
            initSearchInput(that, listId);
            var listArr=eval('{php echo json_encode($templist);}');
            var aa=$('#' + listId);

            //遍历数组，创建元素默认显示
            $('#' + listId).html('');
            $.each(listArr, function(index, item){
                var divStr = '<div onclick="search('+item.raceid+')" id='+item.raceid+'>'+item.name+'</div>';
                $('#' + listId).append(divStr);
            })

            //current用来记录当前元素的索引值
            var current = 0;
            //匹配文本框中输入的字符串
            var showList = searchText(that, listArr, listId);

            bindFun();

            //为文本框绑定键盘引起事件
            $(this).keyup(function(e){
                //如果输入空格自动删除
                this.value=this.value.replace(' ','');
                //列表框显示
                $('#' + listId).show();
                if(e.keyCode == 38) {
                    //up
                    current --;
                    if(current <= 0) {
                        current = 0;
                    }
                }else if(e.keyCode == 40) {
                    //down
                    current ++;
                    if(current >= showList.length) {
                        current = showList.length -1;
                    }

                }else if(e.keyCode == 13) {
                    //enter
                    //如果按下回车，将此列表项的内容填充到文本框中
                    $(that).val(showList[current].name);
                    //下拉框隐藏
                    $('#' + listId).hide();

                }else {
                    //other
                    showList = searchText(that, listArr, listId);
                    current = 0;
                }
                localStorage.setItem('current',current);


                //设置当前项的背景色及位置
                if(showList && showList.length!=0){
                    $.each(showList, function(index, item){
                        if(index == current) {
                            $('#' + item.raceid).css('background', '#eee');
                            $('#' + listId).scrollTop($('#' + item.raceid).get(0).offsetTop);
                        }else {
                            $('#' + item.raceid).css('background', '');
                        }
                    })
                }
                //设置下拉框的高度
                //212为列表框的最大高度
                if(showList && showList.length!=0){
                    if(212 > $('#' + listId).find('div').eq(0).height() * showList.length) {
                        $('#' + listId).height($('#' + listId).find('div').eq(0).height() * showList.length);
                    }else {
                        $('#' + listId).height(212);
                    }
                }
            })
        }

        //绑定事件
        function bindFun(){
            //给下拉箭头绑定点击事件  点击下拉箭头显示/隐藏对应的列表
            //输入框的类名为selectInput
            //下拉箭头的类名为picture_click、dropDowns
            //下拉列表的类名为selectList
            for(var i = 0; i < $('.picture_click').length; i++) {
                $('.picture_click').eq(i).click(function(){
                    $(this).parent().find('.selectList').toggle();
                })
            }

            //为列表中的每一项绑定鼠标经过事件
            $('.selectList div').mouseenter(function(){
                $(this).css("background", "#eee").siblings().css("background", "");
            });
            //为列表中的每一项绑定单击事件
            $('.selectList div').bind('click', function(){
                //文本框为选中项的值
                $(this).parent().parent().find('.selectInput').val($(this).html());
                //下拉框隐藏
                $(this).parent().hide();
            });
        }


        function initSearchInput(that, listId) {

            //点击下拉框外部的时候使下拉框隐藏
            var dropDowns = document.getElementsByClassName('dropDowns');
            var selectList = document.getElementsByClassName('selectList');

            document.body.onclick = function(e){
                e = e || window.event;
                var target = e.target || e.srcElement;
                if(target == that){
                    $('#' + listId).show();
                }else{
                    for(var i = 0; i < dropDowns.length; i++) {
                        if(target != dropDowns[i] && target != selectList[i]){
                            selectList[i].style.display = 'none';
                        }
                    }
                }

            }
        }


        function searchText(that, listArr, listId){
            //文本框中输入的字符串
            var searchVal = $(that).val();
            var showList = [];
            if(showList.length== 0 && !$(that).val()){
                //showList为列表中和所输入的字符串匹配的项
                showList = listArr;
            }

            if(searchVal){
                //将和所输入的字符串匹配的项存入showList
                //将匹配项显示，不匹配项隐藏
                $.each(listArr, function(index, item){
                    if(item.name.indexOf(searchVal) != -1) {
                        $('#' + item.raceid).css('display', 'block');
                        showList.push(item);
                    }else {
                        $('#' + item.raceid).css('display', 'none');
                    }
                })
            }else{
                showList = listArr;
                $.each(listArr, function(index, item){
                    $('#' + item.raceid).css('display', 'block');
                })
                $(that).siblings('.selectList').find('#nullcon').hide();
            }

            if(showList.length== 0 && $(that).val()){
                $('#' + listId).height(50);
                $(that).siblings('.selectList').find('#nullcon').html('没有找到"'+$(that).val()+'"的内容').show();
            }


            return showList;
        }
        function submit($id) {
            var search=document.getElementById($id).value;
            console.log(search);
            if (!search){
                util.alert("没有搜索内容");
                return false;
            }else{
                var arr={search:'grade',value:search};
                getactivity(arr);
            }
        }
        function getactivity(arr) {
            $.ajax({
                type: 'post',
                url: "{php echo app_url('home/index/search')}",
                data: arr,
                dataType: 'json',
                success: function(data){
                    var result='';
                    if (data[0]!=null){
                        for(var i = 0; i < data.length; i++){
                            var detail="http://do.18bang.cn/app/index.php?i=6&c=entry&m=aide_activity&do=home&ac=index&op=detail&activityid="+data[i].id;
                            result+='<li class="mui-table-view-cell">' +
								'<a class="mui-navigate-right" href='+detail+'>'+data[i].title+'</a> </li>'
                        }
                        document.getElementById('result1').innerHTML=result;
                        document.getElementById('result2').innerHTML=result;
                    }else {
                        result = '<div class="bottom-remind">暂无活动</div>';
                        document.getElementById('result1').innerHTML=result;
                        document.getElementById('result2').innerHTML=result;
                    }
                },
                error: function(xhr, type){
                    // alert('加载失败，请刷新下重试!');
                    // 即使加载出错，也得重置
                    console.log('加载失败')
                }
            });

        }

		</script>

	</body>

</html>
